<template>
    <div class="bground">
        <el-divider content-position="left" style="font-size: 100px"><p style="font-size: 20px">待完成订单</p></el-divider>
        <br>
        <div v-for="(item,index) in orders" class="order-item">
            <!--        订单-->
            <el-row>
                <el-col :span="3"></el-col>
                <el-col :span="4">
                    <div>
                        <el-avatar shape="square" :size="100" :src="item.merchantImage" class="avatar" />
                    </div>
                </el-col>
                <el-col :span="8">
                    <div>
                        <span class="custom-span" style="font-weight: bold; font-size: 20px;">{{item.shopName}}</span>
                    </div>
                    <div>
                        <span style="margin-right: 10px; font-size: 16px;">￥{{item.amount}}</span>
                    </div>
                    <div>
                        <span style="font-size: 16px;">{{item.description}}</span>
                    </div>
                </el-col>
                <el-col :span="2" style="display: flex; justify-content: center; align-items: center;">
                    <div><el-tag class="ml-2" type="warning" style="font-size: 16px;">努力制作中</el-tag></div>
                </el-col>
                <el-col :span="4" style="display: flex; justify-content: center; align-items: center;">
                    <el-button style="height: 30px;width:30px" type="danger" @click="refund(item.id)" circle>
                        <img style="height: 30px;width:30px" src="../../public/img/resources/tk.png">
                    </el-button>
                    <el-dialog v-model="msgRefund" title="填写退款信息" style="width:500px">
                        <div v-for="item in orderRefund">
                            <el-row>
                                <div>
                                    <el-text class="mx-1" size="large">订单编号：{{item.number}}</el-text>
                                </div>
                            </el-row>
                            <el-row>
                                <div>
                                    <el-text class="mx-1" size="large">总金额：{{item.amount}}</el-text>
                                </div>
                            </el-row>
                            <el-row>
                                <div>
                                    <el-text class="mx-1" size="large">下单时间：{{item.orderTime}}</el-text>
                                </div>
                            </el-row>
                            <el-row>
                                <el-table :data="orderRefundDetail" style="width: 100%">
                                    <el-table-column prop="image" label="图片" width="100" >
                                        <template #default="scope">
                                            <el-avatar shape="square" :size="60" :src="scope.row.image" class="avatar" />
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="price" label="价格" width="100" />
                                    <el-table-column prop="number" label="数量" width="100" />
                                    <el-table-column prop="amount" label="共计" width="100" />
                                </el-table>
                            </el-row>
                            <el-row>
                                <el-input
                                        v-model="message"
                                        :rows="2"
                                        type="textarea"
                                        placeholder="请输入申请理由"
                                />
                            </el-row>
                            <el-row>
                                <el-button shape="square"  type="primary" @click="submitRefund(index)">提交申请</el-button>
                                <el-button shape="square"  type="primary" @click="closeMsgRefund">取消</el-button>
                            </el-row>
                        </div>
                    </el-dialog>
                    <el-col :span="2"></el-col>
                <el-button type="danger" :icon="Delete" @click="deleteThisOrder(item.id)"></el-button>
            </el-col>
            </el-row>
            <!--        具体的订单-->
            <el-row>
                <el-col :span="3"></el-col>
                <el-col :span="2" v-for="items in orderDetail[index]">
                    <el-avatar shape="square" :size="50" :src="items.image" class="avatar" />
                    <span>X {{items.number}}</span>
                </el-col>
                &ensp;&ensp;&ensp;
            </el-row>
        </div>
    </div>


</template>

<script setup>
    import {onMounted, ref} from 'vue'
    import {
        getAll,
        deleteOrder,
        getOrders,
        getOrderDetail,
        deleteMyOrder,
        getWaitComplete,
        queryOrderById
    } from "../api/order";
    import {
        Bell,ChatLineSquare,Search,Edit,Delete,List
    } from '@element-plus/icons-vue'
    import { useStore } from "vuex";
    import {getMerchant} from "../api/merchant";
    import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
    import {submitComment} from '../api/comment'
    import {subRefund} from "../api/Refund";

    const orders=ref([])
    const orderDetail=ref([])
    const merchant=ref([])
    let dialogVisible=ref(false)
    const value=ref([])

    const orderRefundDetail=ref([])
    const orderRefund=ref([])

    const refundId=ref(0)
    const store = useStore();
    const msgRefund=ref(false)
    const message=ref('')

    onMounted(()=>{
        // 显示正在加载
        const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)',
        })
        setTimeout(() => {
            loading.close()
        }, 1000);
        const data={id:store.getters.getId};

        getWaitComplete(data).then((res)=>{
            //resd是一整个数组
            const resd=res.data;
            for(let i=0;i<resd.length;i++){
                orders.value.push(resd[i])
                // orders.value[i].orderId=orders.value[i].id
                //获取该订单id所有对应的商品
                getOrderDetail({id:resd[i].id}).then(res=>{
                    orderDetail.value[i]=res.data
                })
                //获取该店家信息
                getMerchant({merchantId:resd[i].merchantId}).then((msg)=>{
                    orders.value[i].shopName=msg.data.shopName
                    orders.value[i].merchantImage=msg.data.image
                    orders.value[i].description=msg.data.description
                })
            }
        })
    })

    //删除订单
    const deleteThisOrder = (id) => {
        ElMessageBox.confirm(
            '订单删除后将不可恢复，确认删除此订单?',
            '提示',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                console.log(id);
                deleteMyOrder({id:id})
                ElMessage({
                    type: 'success',
                    message: '成功删除订单',
                })
                let nowIndex=-1;
                orders.value.forEach(order=>{
                    nowIndex++
                    console.log(order)
                    if(order["id"]==id){
                        orders.value.splice(nowIndex,1)
                        return
                    }
                })
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '取消删除订单',
                })
            })
    }

    //申请退款窗口
    const refund = (id) => {
        msgRefund.value=true;
        refundId.value=id;
        orderRefundDetail.value=[]
        orderRefund.value=[]
        queryOrderById({id:id}).then(res=>{
            orderRefund.value.push(res.data)
        })
        getOrderDetail({id:id}).then(res=>{
            orderRefundDetail.value=res.data
        })
    }




    const deleteRow = (orderId,index) => {
        console.log(index)
        deleteOrder({id:orderId}).then((res)=>{
            tableData.value.splice(index, 1)
        })
    }

    const submitRefund=(index)=>{
        const data={orderId:refundId.value,message:message.value}
        subRefund(data).then(res=>{
            ElMessage({
                type: 'success',
                message: '申请成功',
            })
            closeMsgRefund()
        })
        message.value=''
        orders.value.splice(index, 1)
    }

    //关闭退款申请窗口
    const closeMsgRefund=()=>{
        msgRefund.value=false
        refundId.value=0
    }

</script>
<style>
    .el-row {
        margin-bottom: 20px;
    }
    .el-row:last-child {
        margin-bottom: 0;
    }
    .el-col {
        border-radius: 4px;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .order-item {
        padding: 10px;
        margin-bottom: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        background-color: #B0E0E6;
    }
    .bground {
        width: 100%;
        background-color: rgba(0, 191, 255, 0.2);
        border: 1px solid #ccc;
        border-radius: 10px;
        /*background-image: url('../views/slider-pic/bizhi4.png');*/
    }
</style>